<template>

  <div class="Reg_log_style">
    <div class="logo"><a href="#"><img src="images/logo.png"/></a></div>
    <div class="login_style">
      <div class="left_img"><img src="images/bg_name_03.png"/></div>
      <div class="right_img"><img src="images/bg_name_05.png"/></div>
      <div class="title_name"><span>登录</span><span style="margin-left: 444px" @click="to_register">注册</span></div>
      <div class="login_m_1">
        <form id="myform" class="sign_area" autocomplete="off">
          <div class="add_login">
            <ul>
              <li class="frame_style"><label class="user_icon"></label>
                <input name="" type="text" v-model="user.username" placeholder="请输入用户名"/>
              </li>
              <li class="frame_style"><label class="password_icon"></label><input type="password"
                                                                                  v-model="user.password"
                                                                                  placeholder="请输入密码"/>
              </li>
            </ul>

            <div class="auto_login clearfix">
              <p class="clearfix">
                <a id="check_agreement" href="#" class="check_agreement">自动登录</a>
                <input id="autoLoginCheck" type="hidden">
                <span id="agreement_tips" class="auto_tips" style="">请勿在公用电脑上启用</span>
              </p>
              <a href="#" target="_blank" class="forget_pswd" tabindex="-1">忘记密码？</a>
            </div>
            <div class="center clearfix"><a class="btn_pink" id="btn_signin"
                                            href="javascript:void(0)" @click="getUserMsg">立即登录</a></div>
          </div>
        </form>
        <!--其他登录方式-->
        <div class="Login_Method">
          <div class="title"><span>第三方登录方式</span></div>
          <div><a href="#"><img src="images/l_1.png"/></a><a href="#"><img src="images/l_2.png"/></a><a
              href="#"><img src="images/l_4.png"/></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { userTokenStore } from '@/stores/index.js'
const userToken = userTokenStore()
// token解析
import {jwtDecode} from 'jwt-decode';

export default {
  data() {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  }, methods: {
    //跳转到注册页面
    to_register() {
      this.$router.push('/register')
    },
    getUserMsg() {
      axios({
        method:'post',
        url:'/admin/user/login',
        data: this.user
      }).then((res) => {
        const token = jwtDecode(res.data.data.token)
        if (this.user.username === token.sub) {
          userToken.token = res.data.data.token
          console.log(userToken.token)
          ElMessage.success('欢迎回来')
          this.$router.push('/index')

        } else {
          ElMessage.success('账号或密码错误')
        }
      }).catch((error) => {
        console.log(error)
      });
    }

  }
}


</script>

<style>
@import "../style/css/common.css";
@import "../style/css/style.css";
</style>
